<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>苹果设备交互动画</title>
    <style>
        /*<!--居中显示-->*/
        body{
            margin: 0;
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background: #aaa;
        }
        .container{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*设置容器尺寸*/
            width: 360px;
            height: 350px;
            justify-content: center;
        }
        /*线性渐变图案作为屏幕的背景*/
        .device{
            box-sizing: border-box;
            position: relative;
            display: flex;
            justify-content: center;
            /*height: 100px;*/
            /*width: 100px;*/
            background: linear-gradient(120deg,#ddd 30%,#ccc 30%);

            transform: translate(-25%);
        }
        .device::before, .device::after{
            content: "";
            position: absolute;
        }
        .iphone::before,.mini::before,.ipad::before {
            width: 2px;
            height: 2px;
            border-style: solid;
            border-color: #a5adbe;
            border-width: 0 12px 0 2px;
        }
        .iphone::after,.mini::after,.ipad::after{
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
        }
        .iphone{
            width: 59px;
            height: 124px;
            border: #484f5e solid;
            border-width: 18px 4px;
            border-radius: 6px;
        }
        .iphone::before{
            top : -10px;
        }
        .iphone::after{
            bottom: -13px;
        }
        .mini{
            width: 93px;
            height: 138px;
            border: #484f5e solid;
            border-width: 14px 5px;
            border-radius: 10px;
        }
        .mini::before{
            top : -8px;
        }
        .mini::after{
            bottom: -11px;
        }
        .ipad{
            width: 134px;
            height: 176px;
            border: #484f5e solid;
            border-width: 18px 6px;
            border-radius: 12px;
        }
        .ipad::before{
            top : -10px;
        }
        .ipad::after{
            bottom: -13px;
        }
        /*macbook*/
        .macbook{
            width: 234px;
            height: 155px;
            border: 8px solid #484f5e;
            border-radius: 7px 7px 0 0;
        }
        .macbook::before{
            width: 294px;
            height: 14px;
            background-color: #e8ebf0;
            top: calc(100% + 8px);
            border-radius: 0 0 14px 14px;
        }
        .macbook::after{
            width: 3px;
            height: 3px;
            background-color: #a5adbe;
            top: -6px;
            border-radius: 50%  ;
        }
        .imac{
            width: 360px;
            height: 215px;
            border-radius: 10px;
            /*注意这里box-shadow的使用*/
            box-shadow: inset 0 14px #484f5e,
            inset 14px 0 #484f5e,
            inset -14px 0 #484f5e;
            border-bottom: 33px solid #e8ebf1 ;
            /*定义转换 Y轴值*/
            transform: translateY(14px);
        }
        /*画出题型底座 注意border法*/
        .imac::before{
            width: 90px;
            height: 0;
            top:calc(100% + 33px);
            border: solid transparent;
            border-bottom-color: #e2e4e8;
            border-width: 0 10px 47px 10px;
        }
        /*用box-shadow画出的第二个点~*/
        .imac::after{
            width: 4px;
            height: 4px;
            background-color: #a5adbe;
            top: 5px;
            border-radius: 50%;
            box-shadow: 0 191px 0 4px #464e5d;
        }

        /*定义button位置*/
        .button{
            position: absolute;
            width: inherit;
            font-size: 30px;
            height: 2em;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            /*transform: translateX(-10px);*/
        }
        /*只选择button后一代的所有元素*/
        .button > *{
            position: relative;
            width: 4em;
        }
        .button > *::before{
            position: absolute;
        }
        .button .left::before{
            content: '←';
            right: 0;
        }
        .button .right::before{
            content: "→";
        }
        /*原版*后面应该多了个T*/
        .button > *::before{
            position: absolute;
            width: 2em;
            height: 2em;
            background-color: #484f5e;
            color: silver;
            text-align: center;
            line-height: 2em;
            -webkit-border-radius: 1em;
            -moz-border-radius: 1em;
            border-radius: 1em;
            cursor: pointer;
        }
        .button >*::before{
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s ;
            -ms-transition: 0.2s ;
            -o-transition: 0.2s ;
            transition: 0.2s ;
        }
        /*因为找不到长箭头暂时就先不改了*/
        .button .left:hover::before{
            width:4em;
        }
        .button .right:hover::before{
            width:4em;
        }
        .button > *:active {
            transform: scale(0.9);
            filter:brightness(0.1);
        }
        .device,.device::before,.device::after{
            transition:0.4s cubic-bezier(0.5,1.7,0.5,1.2);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="device iphone"></div>
    <!--<div class="device mini"></div>-->
    <!--<div class="device ipad"></div>-->
    <!--<div class="device macbook"></div>-->
    <!--<div class="device imac"></div>-->
    <div class="button">
        <span class="left"></span>
        <span class="right"></span>
    </div>
</div>
</body>
<script>

    const $ = (className) => document.getElementsByClassName(className)[0];
    let devices = ['iphone','mini','ipad','macbook','imac'];
    let loop = {
        'left':()=>devices.unshift(devices.pop()),
        'right':()=>devices.push(devices.shift())
    };
    Array.from($('button').children).forEach(element => element.addEventListener('click',function(e){
        loop[e.target.className]();
        // alert($('device').className);
        $('device').className = 'device ' + devices[0];
    }));
</script>
</html>